<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">

    <title>Hello, world!</title>
    <style>
        .my-ctl {
            margin: 5px 5px 5px 0px;
        }
    </style>
</head>

<body>


<div id="app">

    <form class="form-inline">

        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">编号</div>
            </div>
            <input type="text" class="form-control" style="width: 150px" v-model="query.st_id">
        </div>

        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">姓名</div>
            </div>
            <input type="text" class="form-control" style="width: 150px" v-model="query.st_name">
        </div>


        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">电话</div>
            </div>
            <input type="text" class="form-control" style="width: 150px" v-model="query.st_phone">
        </div>


        <button type="button" class="btn btn-primary" @click="goPage(1)">查询</button>

    </form>

    <div style="margin:10px 0px;">
<!--        <button class="btn btn-primary" @click="openAdd"><i class="fa fa-plus"></i> 新增学生</button>-->
    </div>

    <table class="table">
        <thead>
        <tr>
            <th>学生号</th>
            <th>学生姓名</th>
            <th>学生电话</th>
            <th>学生邮箱</th>
            <th>密码</th>
            <th>注册时间</th>
<!--            <th>操作</th>-->
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in page.list" :key="item.bob_id">
            <td>{{item.st_id}}</td>
            <td>{{item.st_name}}</td>
            <td>{{item.st_phone}}</td>
            <td>{{item.st_mail}}</td>
            <td>{{item.st_pwd}}</td>
            <td>{{item.st_adtime}}</td>

<!--            <td>-->
<!--                <button type="button" class="btn btn-link" @click="openUpd(item)">修改</button>-->
<!--                <button type="button" class="btn btn-link" @click="execDel(item)">删除</button>-->
<!--            </td>-->
        </tr>
        </tbody>
    </table>

    <nav aria-label="Page navigation example">
        <ul class="pagination" style="display: flex;align-items: center;">

            <li class="page-item" style="margin-right: 10px">
                <div class="input-group my-ctl">
                    <div class="input-group-prepend">
                        <div class="input-group-text">每页</div>
                    </div>
                    <select class="custom-select" style="width: 70px;" v-model="query.pageSize" @change="goPage(1)">
                        <option v-for="pageSize in [2,4,5,10]" :value="pageSize">{{pageSize}}</option>
                    </select>
                    <div class="input-group-apppend">
                        <div class="input-group-text">条记录</div>
                    </div>
                </div>
            </li>

            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(1)">首页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.pre)">上页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.next)">下页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.last)">尾页</a></li>

            <li class="page-item" style="margin-left: 10px;">
                当前第<input style="border: 1px solid #eeeeee;width: 30px;text-align: center;margin: 0px 3px" type="text"
                          v-model="query.pageNum" @blur="goPage(query.pageNum)"/>页{{page.size}}条记录，共{{page.pages}}页{{page.total}}条记录.
            </li>
        </ul>
    </nav>

    <!-- 新增窗口 -->
    <div id="add-win" style="display:none;padding:15px;">

        <form>
            <div class="form-group">
                <label>编号</label>
                <input type="text" class="form-control" v-model="addData.st_id">
            </div>

            <div class="form-group">
                <label>姓名</label>
                <input type="text" class="form-control" v-model="addData.st_name">
            </div>

            <div class="form-group">
                <label>电话</label>
                <input type="text" class="form-control" v-model="addData.st_phone">
            </div>

            <div class="form-group">
                <label>邮箱</label>
                <input type="text" class="form-control" v-model="addData.st_mail">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="text" class="form-control" v-model="addData.st_pwd">
            </div>
            <div class="form-group">
                <label>注册时间</label>
                <input type="text" class="form-control" v-model="addData.st_adtime">
            </div>

            <button type="button" class="btn btn-primary" @click="execAdd">提交</button>
        </form>
    </div>

    <!-- 修改窗口 -->
    <div id="upd-win" style="display: none;padding: 15px;">
        <form>
            <!--            <div class="form-group">-->
            <!--                <label>学生编号</label>-->
            <!--                <input type="text" class="form-control" v-model="updData.b_id">-->
            <!--            </div>-->

            <div class="form-group">
                <label>学生名称</label>
                <input type="text" class="form-control" v-model="updData.b_name">
            </div>

            <div class="form-group">
                <label>学生作者</label>
                <input type="text" class="form-control" v-model="updData.b_writer">
            </div>

            <div class="form-group">
                <label>学生关键字</label>
                <input type="text" class="form-control" v-model="updData.b_keywords">
            </div>

            <button type="button" class="btn btn-primary" @click="execUpd">提交</button>

        </form>
    </div>

</div>


<script src="../js/jquery-3.6.0.slim.min.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/vue.global.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/my-axios.js"></script>
<script src="../layer/layer.js"></script>

<script>

    const app = {
        data() {
            return {
                query: {
                    pageNum: 1,
                    pageSize: 5,
                    ma_id: '',
                    st_id: '',
                    bb_id: '',
                    bb_start_btime: '',
                    bb_end_btime: '',
                    bb_start_extime: '',
                    bb_end_extime: '',
                    bb_start_retime: '',
                    bb_end_retime: ''
                },

                page: {},

                bobList: [],
                addData: {
                    bob_id: '',
                    st_id: '',
                    ma_id: '',
                    bb_id: '',
                    bb_btime: '',
                    bb_extime: '',
                    bb_retime: ''
                },
                addIdx: null,
                updData: {
                    bob_id: '',
                    st_id: '',
                    ma_id: '',
                    bb_id: '',
                    bb_btime: '',
                    bb_extime: '',
                    bb_retime: ''
                },
                updIdx: null,
                delIdx: null,
            };
        },

        methods: {

            //分页跳转
            goPage(pageNum, pageSize) {
                if (pageNum) {
                    this.query.pageNum = pageNum;
                    if (pageSize) {
                        this.query.pageSize = pageSize;
                    }
                } else {
                    this.query.pageNum = 1;
                }

                this.getBobcardList();
            },

            getBobcardList() {
                const loadIdx = layer.load();
                myAxios.get('/student/studentList', {params: this.query}).then((response) => {
                    layer.close(loadIdx);
                    //this.bookList = response.data.data;
                    this.page = response.data.data;
                    this.query.pageNum = this.page.current;//用服务端数据矫正客户端
                    this.query.pageSize = this.page.pageSize;//用服务端数据矫正客户端
                });
            },

            openAdd() {
                this.addData =
                    {
                        bob_id: '',
                        st_id: '',
                        ma_id: '',
                        bb_id: '',
                        bb_btime: '',
                        bb_extime: '',
                        bb_retime: ''
                    };
                this.addIdx = layer.open({
                    type: 1,
                    title: '新增学生',
                    area: ['800px', '600px'],
                    content: $('#add-win')
                });
            },

            execAdd() {
                const idx = layer.load();
                myAxios.post('/book/bookDoAdd', this.addData).then(res => {
                    layer.close(idx);
                    if (res.data.success) {
                        // this.getBobcardList();
                        this.goPage(this.page.last + 1);
                        layer.close(this.addIdx);
                        layer.msg('新增学生成功 ！', {icon: 1});
                    } else {
                        layer.msg(res.data.message, {icon: 2}
                        );
                    }
                }).catch(err => {
                    layer.close(idx);
                    layer.msg('新增学生失败！', {icon: 2});
                });
            },

            openUpd(item) {
                this.updData = {...item};//js解构 ,在这里作用：产生一个item对象的副本
                this.updIdx = layer.open({
                    type: 1,
                    title: '修改学生信息',
                    area: ['800px', '600px'],
                    content: $('#upd-win')
                });
            },

            execUpd() {
                const idx = layer.load();
                myAxios.post('/book/bookDoUpd', this.updData).then(res => {
                    layer.close(idx);
                    if (res.data.success) {
                        // this.getBobcardList();
                        this.goPage(this.page.current);
                        layer.close(this.updIdx);
                        layer.msg('修改学生信息成功！', {icon: 1});
                    } else {
                        layer.msg(res.data.message, {icon: 2}
                        );
                    }
                }).catch(err => {
                    layer.close(idx);
                    layer.msg('修改学生信息失败！', {icon: 2});
                });
            },

            execDel(item) {
                const idx = layer.load();
                myAxios.post('/book/bookDoDel', item).then(res => {
                    layer.close(idx);
                    if (res.data.success) {
                        // this.getBobcardList();
                        this.goPage(this.page.current);
                        layer.close(this.delIdx);
                        layer.msg('删除学生成功 ！', {icon: 1});
                    } else {
                        layer.msg(res.data.message, {icon: 2}
                        );
                    }
                }).catch(err => {
                    layer.close(idx);
                    layer.msg('删除学生失败！', {icon: 2});
                });
            },

            closedelwin() {
                this.getBobcardList();
                layer.close(this.delIdx);
            },
        },

        mounted() {
            // this.getBobcardList();
            this.goPage(1);
        }
    };

    Vue.createApp(app).mount('#app')
</script>
</body>

</html>